<template>
	<!-- 超市管理系统首页 -->
	<view>
		<view class="swiperbox">
			<swiper class="swiper" circular="true" autoplay="true" interval="5000"
				duration="500" vertical="true">
				<swiper-item class="item">
					<text class="text1">时间:&nbsp;{{times}}&nbsp;&nbsp;{{week}}</text>
				</swiper-item>
				<swiper-item class="item">
					<text class="text1">今日:&nbsp;&nbsp;</text>
					<text class="text1" style="color: #89c58d;">入库&nbsp;&nbsp;{{todaycom}}笔</text>
					<text class="text1" style="color: red;">出库&nbsp;&nbsp;{{todayout}}笔</text>
					<text class="text1" style="color: #4473a5;">转库&nbsp;&nbsp;{{todayturn}}笔</text>
				</swiper-item>
				<swiper-item class="item">
					<text class="text1">累计:&nbsp;&nbsp;</text>
					<text class="text1" style="color: #89c58d;">入库&nbsp;&nbsp;{{addcom}}笔</text>
					<text class="text1" style="color: red;">出库&nbsp;&nbsp;{{addout}}笔</text>
					<text class="text1" style="color: #4473a5;">转库&nbsp;&nbsp;{{addturn}}笔</text>
				</swiper-item>
			</swiper>				
		</view>
		<view class="pics">
			<scroll-view class="left" scroll-y>
				<view class="leftitem" :class="[flag==0?yes:no]"  @click="leftClickHandle('所有')">记录</view>
				<view class="leftitem" :class="[flag==1?yes:no]"  @click="leftClickHandle('入库')">入库</view>
				<view class="leftitem" :class="[flag==2?yes:no]"  @click="leftClickHandle('转库')">转库</view>
				<view class="leftitem" :class="[flag==3?yes:no]"  @click="leftClickHandle('出库')">出库</view>
				<view class="leftitem" :class="[flag==4?yes:no]"  @click="leftClickHandle('预警')">
					<uni-badge :text="angle" absolute="rightTop" :offset="[6, 10]" size="small">
						<view class="box"><text>预警</text></view>
					</uni-badge>
				</view>
				<view class="leftitem" :class="[flag==5?yes:no]" @click="updata">刷新</view>
			</scroll-view>
			<!-- 右侧记录信息 -->
			<scroll-view class="right" scroll-y v-show="show">
				<view class="item" v-for="(item,index) in options" :key="index" @click="tostorage(index)">
					<view class="box">
						<text class="text1">{{item.stoname}}</text>
						<text class="text3" style="font-weight: 700; font-size: 120%; color: #9dc9de;">类型:&nbsp;{{item.type}}</text>
					</view>
					<view class="box">
						<text class="text2">规格:&nbsp;{{item.stospe}}</text>
						<text class="text3">数量:&nbsp;{{item.num}}</text>
					</view>
					<view class="box">
						<text class="text4">[{{item.data.substring(0, 10)}}]</text>
						<text class="text5">{{item.amount}}元</text>
					</view>
					<view class="br"></view>
				</view>
				<view class="">
					<text v-if="options.length === 0">暂无数据</text>
				</view>
			</scroll-view>
			<!-- 右侧转库记录信息 -->
			<scroll-view class="right" scroll-y v-show="warshow">
				<view class="item" v-for="(item,index) in options" :key="index" @click="tostorage(index)">
					<view class="box">
						<text class="text1">{{item.stoname}}</text>
						<text class="text6">[{{item.data.substring(0, 10)}}]</text>
					</view>
					<view class="box">
						<text class="text2">规格:&nbsp;{{item.stospe}}</text>
						<text class="text3">数量:&nbsp;{{item.num}}</text>
					</view>
					<view class="box">
						<text class="text2" style="color:#89c58d;">原仓库:{{item.wname}}</text>
						<text class="text6" style="color:#89c58d;">现仓库:{{item.nowwar}}</text>
					</view>
					<view class="br"></view>
				</view>
				<text v-if="options.length === 0">暂无数据</text>
			</scroll-view>
			<!-- 右侧警报记录信息 -->
			<scroll-view class="right" scroll-y v-show="stoshow">
				<view class="item" v-for="(item,index) in option" :key="index" @click="topage(index)">
					<view class="box">
						<text class="text1">{{item.name}}</text>
						<text class="text6">编号:[{{item.id}}]</text>
					</view>
					<view class="box">
						<text class="text2">供应商编号:{{item.supplier_id}}</text>
						<text class="text3">仓库编号:{{item.wid}}</text>
					</view>
					<view class="box">
						<text class="text2" style="color:#89c58d;">现有数量:{{item.num}}</text>
						<text class="text6" style="color:#89c58d;">警报数量:{{item.alarmnum}}</text>
					</view>
					<view class="br"></view>
				</view>
				<text v-if="option.length === 0">暂无数据</text>
			</scroll-view>
		</view>
		<view>
			<drag-button name="出入库" :isDock="true" :existTabBar="true" @btnClick="btnClick" />
			<u-modal v-model="noticeShow" title='' confirm-text="取消">
				<supbtn></supbtn>
			</u-modal>
		</view>
		<view>
			<u-tabbar :list="tabBerList" ></u-tabbar>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import dragButton from '../../../components/drag-button.vue';
	import supbtn from './sup-btncom.vue';
	import getDateTime from '../../../until/getdateTime.js'
	export default {
		components: {
			dragButton,
			supbtn
		},
		data() {
			return {
				flag:'',yes:"yes",no:"no",show:true,warshow:false,stoshow:false,angle:'',
				noticeShow: false,borderTop: false,activeColor: '#17abe3',
				times:'',week:'',option:{},options:{},res:{},num:'',num1:'',
				todaycom:0,todayout:0,todayturn:0,addcom:0,addout:0,addturn:0,
				total:10,current:1,pageSize:0
			}
		},
		computed: {
			...mapState(['tabBerList'])
		},
		created() {this.getTimes()},
		// 在Vue实例销毁前，清除我们的定时器
		beforeDestroy() {if (this.times) {clearInterval(this.getTimesInterval)}},
		onLoad() {
			this.$store.commit('setRoleId',0)
			this.getdata();
			this.getalldata();
		},
		methods: {
			change(e) {
				console.log(e)
			},
			async getdata(){
				const dateres = await this.Request({
					url:'api/stock/gealltdata'
				})
				this.res = dateres;
				this.num = dateres.data.length				//商品数量
				function removalHeavy(array, str) {
				    let strs = [];
				    return array.filter(item => {
				        if(strs.indexOf(item[str]) === -1) {
				            strs.push(item[str])
				            return item;
				        }
				    })
				}
				let newJson = removalHeavy(this.res.data, 'name');
				this.num1 = newJson.length;				//商品种类
				var arr3 = [];
				this.res.data.forEach((item) => arr3.push(item))
				for(let i=0;i<arr3.length;i++){
					if(arr3[i].num<arr3[i].alarmnum){
						this.angle ++;				// 预警角标
					}
				}
				var datatime = getDateTime.dateTimeStr().substring(0,10)
				const typeres = await this.Request({
					url:'api/record/gettimedata',
					method:'POST',
					data:{data:datatime}
				})
				for(let i= 0;i<typeres.data.length;i++) {
					if(typeres.data[i].type == '入库'){
						this.todaycom ++;
					}else if(typeres.data[i].type == '出库'){
						this.todayout ++;
					}else if(typeres.data[i].type == '转库'){
						this.todayturn ++;
					}
				}
				function getweek(time){
					const weekNum = new Date(time).getDay();
					 let week = "";
					  switch (weekNum) {
					    case 0:
					      week = "星期天";
					      break;
					    case 1:
					      week = "星期一";
					      break;
					    case 2:
					      week = "星期二";
					      break;
					    case 3:
					      week = "星期三";
					      break;
					    case 4:
					      week = "星期四";
					      break;
					    case 5:
					      week = "星期五";
					      break;
					    case 6:
					      week = "星期六";
					      break;
					  }
					  return week;
				}
				this.week = getweek(datatime)
			},
			getTimes(){
			    setInterval(this.getTimesInterval, 1000);
			},
			getTimesInterval:function() {
				this.times = getDateTime.dateTimeStr();
			},
			btnClick(){
				this.noticeShow = true;
			},
			async getalldata(){
				//查询记录
				const res =await this.Request({
					url:'/api/record/getallrecords',
					method:'POST',
					data:{pageSize:20,pageCurrent:1}
				})
				const res1 =await this.Request({
					url:'/api/record/getallrecord',
				})
				this.total = res1.data.length
				this.options =res.data
				for(let i= 0;i<res.data.length;i++) {
					if(res.data[i].type == '入库'){
						this.addcom ++;
					}else if(res.data[i].type == '出库'){
						this.addout ++;
					}else if(res.data[i].type == '转库'){
						this.addturn ++;
					}
				}
			},
			change(params){
				console.log(params)
			},
			async leftClickHandle (e) {
				if(e =="所有"){
					this.show = true;
					this.warshow = false
					this.stoshow = false;
					this.flag=0;
					this.getalldata();
				}else if(e =="预警"){
					this.flag=4;
					this.show= false
					this.warshow = false;
					this.stoshow = true;
					for(let i=0;i<this.res.data.length;i++){
						if(this.res.data[i].num>this.res.data[i].alarmnum){
							delete this.res.data[i]
						}
					}
					var arr = [];
					this.res.data.forEach((item) => arr.push(item))	
					this.option = arr;
				}else {
					const typeres = await this.Request({
						url:'api/record/gettypedata',
						method:'POST',
						data:{type:e}
					})
					this.options = typeres.data
					if(e == '入库'){
						this.show= true;
						this.stoshow = false;
						this.warshow = false;
						this.flag=1;
					}else if(e == '转库'){
						this.show= false
						this.stoshow = false;
						this.warshow = true;
						this.flag=2;
					}else if(e == '出库'){
						this.show= true;
						this.stoshow = false;
						this.warshow = false;
						this.flag=3;
					}
				}
			},
			updata(){
				this.flag=5;
				uni.showModal({
					title: '提示',
					content: '重新加载数据需要花费一些时间，是否进行',
					success: function (res) {
						if (res.confirm) {
							uni.showToast({
								title:"正在加载",
								icon:'loading',
								duration:2000
							});
							setTimeout(function() {
								uni.reLaunch({
									url:'/pages/super/sup-information/sup-information'
								})
							}, 2000);
						} else if (res.cancel) {
							uni.reLaunch({
								url:'/pages/super/sup-information/sup-information'
							})
						}
					}
				});
			},
			tostorage(e){
				uni.navigateTo({
					url:'/pages/public/record/recordata?id=' + this.options[e].id
				})
			},
			topage(e){
				uni.navigateTo({
					url:'/pages/public/stock/stoctmentord?id=' + this.option[e].id
				})
			},
			search(){
				uni.navigateTo({
					url:'/pages/super/sup-information/sup-search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.titlebox{
		height: 50px;
		display: flex;
		// background-color: #ffa53d;
		.text{
			margin: auto 0;
			margin-left: 20px;
			font-size: 170%;
			color: #ffa53d;
		}
		.image{
			margin: auto 0;
			height: 30px;
			width:  30px;
			margin-left: 200px;
		}
	}
	.titlecent{
		height: 30px;
		display: flex;
		background-color: #ffa53d;
		.text{
			margin: auto 0;
			margin-left: 20px;
			font-size: 105%;
			color: #ffa53d;
		}
		.text1{
			margin: auto 0;
			// margin-left: 130px;
			font-size: 105%;
			color: #fff;
		}
		.image{
			margin: auto 0;
			height: 30px;
			width:  30px;
			// margin-left: 200px;
		}
	}
	.swiperbox{
		.swiper{
			height: 50px;
			.item{
				display: flex;
				.text1{
					margin: auto 0;
					margin-left: 10px;
				}
			}
		}
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			display: flex;
			width: 60px;
			height: 100%;
			border-right: 2px solid #ffa53d;
			.leftitem{
				height: 40px;
				font-size: 105%;
				font-weight: 600;
				line-height: 60px;
				text-align: center;
				.box {
					width: 40px;
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: 105%;
				}
			}
		}
		.right{
			margin-left: 20px;
			.item{
				margin-top: 8px;
				position: relative;
				.br{
					margin-top: 2px;
					height: 1px;
					width: 100%;
					background-color: #999999;
				}
				.box{
					width: 300px;
					.text1{
						font-size: 120%;
						font-weight: 600;
					}
					.text2{
						color: #b7e481;
					}
					.text3{
						width: 120px;
						float:right;
						// margin-right: 5px;
						color: #b7e481 ; 
					}
					.text4{
						color: #a6a6a6;
					}
					.text5{
						width: 120px;
						float:right;
						color: #a6a6a6;
					}
					.text6{
						width: 120px;
						float:right;
					}
				}
			}
		}
	}
	.yes{
		color: #ffaa00;
		border-left: 4px solid #ffa53d;
	}
</style>

